.popper__arrow {
    color: #333
}

.el-submenu__title, .el-menu-item, #app .sidebar-container .is-active > .el-submenu__title, #app .sidebar-container .el-submenu .el-menu-item, #app .sidebar-container .nest-menu .el-submenu > .el-submenu__title {
    background-color: #333 !important;
    color: #ccc !important;
}

#app .sidebar-container .el-submenu .el-menu-item:hover, #app .sidebar-container .nest-menu .el-submenu > .el-submenu__title:hover, #app .sidebar-container .el-submenu__title:hover, #app .sidebar-container .submenu-title-noDropdown:hover, .el-menu--vertical .el-menu-item:hover, .el-menu--vertical .nest-menu .el-submenu > .el-submenu__title:hover {
    background-color: #555 !important;
    color: #ccc !important;
}

.el-message-box {
    background-color: #333;
    border: 0px;
}

.el-message-box .el-message-box__content {
    color: #fff
}

.el-menu-item.is-active {
    background-color: #555 !important;
}

.table-box .el-table__empty-block {
    background: #666
}

.el-table__empty-text {
    color: #ccc
}

.el-loading-mask {
    background-color: #555
}

.el-loading-spinner .path {
    stroke: #d0a0f0
}

.el-button--text {
    color: #d0a0f0
}

.el-dialog {
    background: #202020
}

.el-dialog__title, .el-form-item__label {
    color: #FFF
}

.el-input__inner, .el-textarea__inner {
    background-color: #333;
    border: 1px solid #666;
    color: #ccc
}

.el-table thead {
    color: #fff
}

.el-table td, .el-table th.is-leaf {
    border-bottom: 0px;
    border-right: 0px
}

.el-table--border, .el-table--group {
    border: 0px
}

.el-table--border::after, .el-table--group::after, .el-table::before {
    background-color: transparent
}

.readonlyInput .el-input__inner, .readonlyInput .el-textarea__inner {
    background-color: #333;
    border: 1px solid #444;
    color: #ccc
}

.ql-editor.ql-blank::before {
    color: #ccc
}

.el-dialog__body {
    color: #ccc
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
    background: #555;
    color: #fff
}

.el-tag, .article-container .article-add-bk-btn[data-v-1711fa42] {
    background-color: rgba(156,92,247,.2);
    color: #ac6cff;
    border-color: #d0a0f0
}

.el-tag .el-icon-close {
    color: #ac6cff
}

#app .sidebar-container .el-scrollbar {
    background: #333
}

.el-popper[x-placement^="bottom"] .popper__arrow {
    color: #333;
    border-bottom-color: transparent
}

.el-popper[x-placement^="bottom"] .popper__arrow::after {
    border-bottom-color: #333
}

.el-menu {
    background-color: #333 !important
}

.el-dropdown-menu__item--divided {
    border-top: 1px solid #555
}

.el-dropdown-menu, .el-dropdown-menu__item--divided::before, .el-select-dropdown__item, .el-select-dropdown {
    background: #333
}

.el-dropdown-menu--medium .el-dropdown-menu__item {
    color: #fff
}

.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover, .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background: #666;
    color: #fff
}

.el-dropdown-menu, .el-dropdown-menu__item--divided::before, .el-select-dropdown__item {
    color: #fff
}

.el-dropdown-menu {
    border: 0px solid transparent
}

.add—bk .add-bk-select .el-input__inner, .add—bk .add-bk-search .el-input__inner {
    background: #333
}

.el-checkbox {
    color: #808080
}

.el-checkbox__input.is-checked + .el-checkbox__label {
    color: #ac6cff
}

.login-container .el-input input {
    color: #fff;
    caret-color: #fff;
    border-bottom: 1px solid #808080
}

.ql-toolbar.ql-snow .ql-picker-label {
    border: 1px solid #555;
    color: #ccc
}

#toolbar .ql-icon {
    filter: invert()
}

.el-pagination.is-background .btn-next, .el-pagination.is-background .btn-prev, .el-pagination.is-background .el-pager li {
    background-color: #333;
    color: #fff
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #d0a0f0
}

.el-tag.el-tag--info {
    background: #333;
    border-color: #aaa;
    color: #ccc
}

.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, .ql-snow.ql-toolbar button.ql-active .ql-stroke, .ql-snow .ql-toolbar button.ql-active .ql-stroke, .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, .ql-snow.ql-toolbar button:focus .ql-stroke, .ql-snow .ql-toolbar button:focus .ql-stroke, .ql-snow.ql-toolbar button:focus .ql-stroke-miter, .ql-snow .ql-toolbar button:focus .ql-stroke-miter, .ql-snow.ql-toolbar button:hover .ql-stroke, .ql-snow .ql-toolbar button:hover .ql-stroke, .ql-snow.ql-toolbar button:hover .ql-stroke-miter, .ql-snow .ql-toolbar button:hover .ql-stroke-miter {
    stroke: #fff
}

.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-fill, .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:focus .ql-fill, .ql-snow .ql-toolbar button:focus .ql-fill, .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, .ql-snow.ql-toolbar button:hover .ql-fill, .ql-snow .ql-toolbar button:hover .ql-fill, .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill {
    fill: #fff
}

.ql-snow .ql-stroke {
    stroke: #aaa
}
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill {
    fill: #ccc
}

.edit-table-box .el-table th, .article-container .table-box .el-table th, .article-container .table-box .el-table th {
    background: #555;
	color: #FFF;
}

.el-table {
    color: #ccc
}

.el-table tr {
    background-color: #444
}

.article-container .table-box .el-table--striped .el-table__body tr.el-table__row--striped td, .edit-table-box .el-table--striped .el-table__body tr.el-table__row--striped td, .el-table--striped .el-table__body tr.el-table__row--striped td {
    background: #555
}

.el-pagination__total, .el-pagination__jump {
    color: #ccc
}

.el-table th {
    background-color: #333
}

.article-container .article-add-bk .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label::before, .article-container .article-add-bk .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::before {
    color: #ff0000
}

// Page

#app .main-container {
    min-height: 100%
}

.hasTagsView .app-main[data-v-4b14b441] {
  min-height: calc(100vh - 94px);
}

.article-add-bk-text {
    color: #CCC
}

body {
    background: #202020
}

.panel-group .card-panel .card-panel-text[data-v-26161d64] {
    color: #d0a0f0
}

#app .main-container, .pagination-container[data-v-6af373ef] {
    background: #202020
}

.app-main[data-v-4b14b441] {
    background-color: #202020
}

.panel-group .card-panel .card-panel-num[data-v-26161d64] {
    color: #FFF
}

.article-container .article-edit, .article-container .article-table, .article-container .edit-table-box, .article-container .table-box,.article-container {
    background: #202020 !important
}

.article-container .article-table .all-list, .article-container .article-edit .all-list {
    color: #fff !important
}

.article-container {
    background-color: transparent !important
}

.article-container .title1 {
    color: #fff !important
}

.article-container .article-search input {
    background: #555;
    border-width: 0
}

.mce-content-body {
    background: #202020;
    color: #fff
}

.mce-panel {
    background-color: #333
}

.mce-container, .mce-container *, .mce-widget, .mce-widget *, .mce-reset, .mce-menubar .mce-menubtn button span {
    color: #ccc
}

.mce-label {
    text-shadow: 0 1px 1px rgba(255,255,255,0)
}

.mce-content-body [data-mce-selected="inline-boundary"] {
    background: #333366
}

.mce-menu-item.mce-disabled, .mce-menu-item.mce-disabled:hover {
    background: #333;
    color: #666
}

.mce-btn button {
    background: #333
}

.mce-btn {
    border: 1px solid #333;
    background: transparent
}

.mce-i-backcolor {
    backrground: #888 !important;
}

.article-container .article-cancel-btn[data-v-1711fa42], .article-container .article-cancel-btn1[data-v-1711fa42] {
    background: #333;
    color: #aaa;
    border-color: #333
}

.navbar[data-v-b4e3e56c] {
    background: #202020;
    box-shadow: 5px 0px 5px #101010;
}

img[data-v-01ebb6ee] {
    content:url("https://hearinmusic.com/img/DPlogo.c676e9eb.png")
}

span[data-v-b4e3e56c] {
    color: #FFF
}

.login-container .submit-container[data-v-3a1298c0] {
    background: #202020
}

a[data-v-3a1298c0] {
    color: #ccc
}

.active[data-v-3a1298c0] {
    color: #fff
}

.login-container .logIn-btn[data-v-3a1298c0] {
    background: #333;
    color: #888
}

#icon-eye {
    fill: #ccc
}

.navbar[data-v-b4e3e56c] {
    height: 60px
}

.el-submenu__title .svg-icon * {
    stroke: #ccc;
    stroke-width: 1.5px
}

.cell span {
    color :#aaaaff !important
}

.music-box {
    background-color: #333 !important
}

.music-box .title-right .t1 {
    color: #fff !important
}

.music-box .title-right .t2 {
    color: #ccc !important
}